<template>
	<view>
		<view style="display: flex;">
			<scroll-view scrollbars="none" :show-scrollbar='true' :scroll-y="true" class="scroll-x">
				<view class="sku_2" @click="province=item" :style="{
					color:province.id==item.id?'#FF1B1B':''
					}" v-for="(item,index) in dizzhix">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view scrollbars="none" :show-scrollbar='true' :scroll-y="true" class="scroll-x" style="width: 37%;">
				<view class="sku_2" @click="cityps=item" :style="{
					color:cityps.id==item.id?'#FF1B1B':''
					}" v-for="(item,index) in city">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		 <scroll-view scrollbars="none" :show-scrollbar='true' :scroll-y="true" class="scroll-x">
				<view class="sku_2" @click="qus_(item)" :style="{
					color:qus.id==item.id?'#FF1B1B':''
					}" v-for="(item,index) in qu">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		dizzhi
	} from "@/untils/setting.js"
	export default {
		name: "di-zhi",
		data() {
			return {
				dizzhix: [],
				province: {}, //省级
				cityps: {}, //市
				qus: {}, //区
			};
		},
		// mounted() {


		// },
		methods: {
			qus_(a) {
				this.qus = a
				// console.log(this.province)
				// console.log(this.cityps)
				// console.log(this.qus)
				this.$store.commit('dizhi', {
					province: {
						name: this.province.name,
						id: this.province.id,

					},
					city: {
						name: this.cityps.name,
						id: this.cityps.id,

					},
					qu: {
						qu: this.qus.name,
						id: this.qus.id,
					}
				})
				console.log(this.$store.state.dizhi)
				this.$emit('onchage', false)
			},
		},
		computed: {
			// 市区
			city() {
				if (this.dizzhix && this.dizzhix.length) {
					let data = this.dizzhix.filter(v => {
						return v.id == this.province.id
					})[0].childlist
					this.cityps = data[0]
					return data
				}

			},
			// 区
			qu() {
				if (this.city && this.city.length) {
					let data = this.city.filter(v => {
						return v.id == this.cityps.id
					})[0].childlist
					return data
				}

			},
		},
		mounted() {
			this.api('Index/areaList').then(res => {
				let data = res.data.data
				console.log(res.data.data);
				this.dizzhix = data
				console.log(this.dizzhix);
				this.province = this.dizzhix[0]
				console.log(this.province);
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.scroll-x {
		width: 30%;
		max-height: 900rpx;
		border-right: 1rpx solid #F1F1F1;
		display: flex;
		box-sizing: border-box;
		flex-wrap: nowrap;
		white-space: nowrap;
		padding: 10upx 20upx 0;
	}

	.sku_2 {
		font-size: 26rpx;
		font-family: OPPOSans;
		font-weight: 500;
		color: #181818;
		line-height: 80rpx;
	}
</style>
